<template>
  <grid>
    <item-list :list="list"></item-list>
    <el-pagination layout="total, prev, pager, next"
                   background
                   @current-change="fetch"
                   :current-page.sync="query.page"
                   :page-size="query.limit"
                   hide-on-single-page
                   style="display: flex;justify-content: center;"
                   :total="total">
    </el-pagination>
  </grid>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import itemList from "@/components/item-list";

export default {
  name: 'items',
  title: '归档 | 历史文章列表',
  data () {
    return {
      query: {
        page: 1,
        limit: 12,
      }
    }
  },
  components: {
    itemList
  },
  computed: {
    ...mapGetters('topic', ['list', 'total']),
  },
  async asyncData ({ store, route }) {
    const { query } = route;
    return store.dispatch('topic/fetchList', { page: 1, limit: 12 })
  },
  methods: {
    ...mapActions('topic', ['fetchList']),
  }
}
</script>
<style lang="scss" scoped>
</style>